<template><!-- TODO-jj: 点击遮罩关闭 -->
  <view>
    <!-- <view v-if="data?.show === 1">
        <uni-fab
          ref="fabRef"
          :pattern="state.pattern"
          :content="state.content"
          horizontal="right"
          vertical="bottom"
          :direction="state.direction"
          @trigger="trigger"
          @fabClick="fabClick"
          :popMenu="true"
        ></uni-fab>  
      </view> -->
    <!-- <view :class="state.show ? 'float-bg' : ''" @click="onTap"></view> -->
    <!-- <view class="kefu">
      <button open-type="contact" class="btn">

      </button>
      <view class="keview">
        <image src="/static/kefu.png" mode="" class="keicon" />
        <text>客服</text>
      </view>
    </view> -->
    <!-- <movable-area class="movable-area">
      <movable-view class="movable-view" :x="x" :y="y" direction="all">
        <view class="kefu">
          <button open-type="contact" class="btn">

          </button>
          <view class="keview">
            <image src="/static/kefu.png" mode="" class="keicon" />
            <text>客服</text>
          </view>
        </view>
      </movable-view>
    </movable-area> -->
</view>
</template>
<script setup>

import sheep from '@/sheep';
import { computed, reactive, ref, unref, getCurrentInstance } from 'vue';
import { onBackPress } from '@dcloudio/uni-app';
const data = computed(() => sheep.$store('app').template.basic?.floatMenu);
const state = reactive({
  pattern: [],
  content: [],
  direction: '',
  show: false,
  start: [0, 0],
  moveY: 100,
  moveX: 100,
  windowWidth: '',
  windowHeight: '',
  x: 400,		//x坐标
  y: 400,		//y坐标
  old: {
    x: 0,
    y: 0
  }
});

const fabRef = ref(null);

const vm = getCurrentInstance();
if (data.value?.mode === 1) {
  state.direction = 'vertical';
} else {
  state.direction = 'horizontal';
}
data.value?.list.forEach((i) => {
  if (data.value?.isText === 0) {
    state.content.push({ iconPath: sheep.$url.cdn(i.src), url: i.url });
  } else {
    state.content.push({ iconPath: sheep.$url.cdn(i.src), text: i.title.text + '', url: i.url });
  }
  state.pattern.push({ color: i.title.color });
});
function trigger(e) {
  sheep.$router.go(e.item.url);
}
function onTap() {
  if (state.show) {
    state.show = false;
    vm.refs.fabRef.close();
  } else {
    state.show = true;
    vm.refs.fabRef.open();
  }
}
function onChange(e) {
  console.log(e)
  state.old.x = e.detail.x
  state.old.y = e.detail.y
}
function fabClick() {
  state.show = !state.show;
}
function drag_start(event) {
  state.start[0] = event.touches[0].clientX - event.target.offsetLeft;
  state.start[1] = event.touches[0].clientY - event.target.offsetTop;
}
function juli() {
  const { windowWidth, windowHeight } = uni.getSystemInfoSync();
  state.windowWidth = windowWidth
  state.windowHeight = windowHeight
  console.log(state.windowHeight)
}
juli()
function drag_hmove(event) {
  let tag = event.touches;
  if (tag[0].clientX < 0) {
    tag[0].clientX = 0
  }
  if (tag[0].clientY < 0) {
    tag[0].clientY = 0
  }
  if (tag[0].clientX > state.windowWidth) {
    tag[0].clientX = state.windowWidth
  }
  if (tag[0].clientY > state.windowHeight) {
    tag[0].clientY = state.windowHeight
  }
  state.moveX = tag[0].clientX - state.start[0];
  state.moveY = tag[0].clientY - state.start[1];
  console.log(state.moveX)
}
onBackPress(() => {
  if (unref(fabRef).isShow) {
    unref(fabRef).close();
    return true;
  } else {
    return false;
  }
});
</script>
<style lang="scss" scoped>
.float-bg {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  background-color: rgba(#000000, 0.4);
}

.kefu {
  width: 100rpx;
  position: fixed;
  // height: 100%;
  top: 65vh;
  right: 20rpx;
  // margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;

  .keicon {
    width: 65rpx;
    height: 65rpx;
  }

  .keview {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text {
      // color: #333;
      color: rgba(252, 20, 8, 1);
      font-size: 23rpx;
      font-weight: 500;
    }
  }

  // /deep/button:after {
  //   border: none;
  // }
}
</style>

<style>
.btn {
  position: absolute;
  background-color: transparent;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  border: none !important;
}

.kefu button:after {
  border: none;
}

/* .movable-area {
  height: 100vh;
  width: 750rpx;
  top: 0;
  position: fixed;
  pointer-events: none;

}

.movable-view {
  width: 100rpx;
  height: 100rpx;
  pointer-events: auto;

  
}
.index {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    background-color: #0a98ff;
    font-size: 16rpx;
    color: #fff;
    line-height: 50rpx;
    text-align: center;
  } */
</style>